<template>
  <div class="dashboard-editor-container" v-loading="isLoading">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="14">
        <div class="chart-wrapper">
          <h3 class="mb__20">落地价格统计</h3>
          <bar-chart
            :chartData="final_price_data"
            v-if="final_price_data.fieldName != undefined"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="10">
        <div class="chart-wrapper">
          <h3 class="mb__20">厂商品牌前十</h3>
          <pie-chart
            :chartData="manufacture_data"
            v-if="manufacture_data.fieldName != undefined"
          />
        </div>
      </el-col>
    </el-row>
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <h3 class="mb__20">落地价 <i>vs</i> 厂商价</h3>
      <line-chart :chartData="final_manufacture_price" v-if="final_manufacture_price.series_id != undefined" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <h3 class="mb__20">油耗统计分布</h3>
          <!-- <raddar-chart /> -->
          <scatter-chart :chartData="fuel_consumption_MIIT" v-if="fuel_consumption_MIIT.length > 0" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <h3 class="mb__20">发动机前十</h3>
          <pie-chart
            :chartData="engine_data"
            v-if="engine_data.fieldName != undefined"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <h3 class="mb__20">百公里加速时间</h3>
          <bar-chart
            :chartData="acceleratione_data"
            v-if="acceleratione_data.fieldName != undefined"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from "@/dashboard/LineChart";
import ScatterChart from "@/dashboard/ScatterChart";
import RaddarChart from "@/dashboard/RaddarChart";
import PieChart from "@/dashboard/PieChart";
import BarChart from "@/dashboard/BarChart";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

import { getSectionField, getScatterField, getFinalManuFacturePrice, getFuelConsumption } from "@/api/statistics.js";

export default {
  name: "Index",
  components: {
    LineChart,
    ScatterChart,
    RaddarChart,
    PieChart,
    BarChart,
  },
  data() {
    return {
      // 落地价格查询参数
      final_price_query: {
        fieldName: "final_price",
        levelName: [
          "5万以下",
          "5~8万",
          "8~10万",
          "10~15万",
          "15~20万",
          "20~25万",
          "25~35万",
          "35~50万",
          "50~70万",
          "70~100万",
          "100~150万",
          "150~300万",
          "300万以上",
        ],
        levelNum: [0, 5, 8, 10, 15, 20, 25, 35, 50, 70, 100, 150, 300],
      },
      // 百公里加速查询参数
      acceleratione_query: {
        fieldName: "acceleration",
        levelName: ["3.8s以下", "3.8~7s", "7~8s", "8~11s", "11~13s", "13s以上"],
        levelNum: [0, 3.8, 7, 8, 11, 13],
      },
      // 落地价格显示参数
      final_price_data: {},
      // 百公里加速显示参数
      acceleratione_data: {},
      // 品牌数据
      manufacture_data: {},
      // 发动机
      engine_data: {},
      // 落地价厂商价
      final_manufacture_price:{},
      // 油耗
      fuel_consumption_MIIT:[],
      lineChartData: lineChartData.newVisitis,

      isLoading:true
    };
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
  },
  async created() {
    // 获取落地价格
    await getSectionField(this.final_price_query).then((res) => {
      this.final_price_data = res.data.data;
    });
    // 获取品牌分布
    await getScatterField("manufacture", "desc").then((res) => {
      this.manufacture_data = res.data.data;
    });
    // 百公里加速时间
    await getSectionField(this.acceleratione_query).then((res) => {
      this.acceleratione_data = res.data.data;
    });
    // 获取发动机分布
    await getScatterField("engine", "desc").then((res) => {
      this.engine_data = res.data.data;
    });
    // 获取油耗
    await getFuelConsumption().then((res) => {
      this.fuel_consumption_MIIT = res.data.data;
    });
    // 落地价厂商价
    await getFinalManuFacturePrice().then(res=>{
        this.final_manufacture_price = res.data.data
    })
    this.isLoading = false
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.mb__20 {
  margin-bottom: 20px;
}
</style>
